<template>
  <div ref="container" class="preview-container" @click.stop="containerClick($event)">
    <div class="content" ref="content">
      <div class="contentTitle" ref="userName">{{userName}}的信息预览</div>
      <div v-show="groupName.length > 0" class="groupTitle">
        <div class="name">* {{groupName}}</div>
      </div>
      <div v-show="isLoading === true" class="notData">
         <span v-show="isLoading === true">正在加载...</span>
      </div>

      <div v-show="isLoading === false && allFieldList.length <= 0" class="notData">
         <span v-show="isLoading === false">无数据 !</span>
      </div>

      <div v-show="isLoading === false" class="section" v-for="(paramList,index) in allFieldList" :key="index">
        <base-info-view
          :paramList="currentEditSectionIndex===index?[]:paramList"
          :groupId="groupId"
          :isAllowEdit="false"
          :isReviewAvatar="true"
          :userId="userId"
        ></base-info-view>
        <div class="bottomLine" v-show="index !== allFieldList.length-1"></div>
        <basic-info-edit
          :paramList="currentEditSectionIndex===index?JSON.parse(JSON.stringify(paramList)):[]"
          :groupId="groupId"
          @cancelEdit="currentEditSectionIndex=-1"
        ></basic-info-edit>

      </div>
      <el-pagination
        v-show="totalPages > 1 && currentEditSectionIndex===-1"
        background
        layout="total,prev, pager, next"
        @current-change="loadBaseAllField()"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        :total="total"
      ></el-pagination>
    </div>

    <basic-info-navigation class="rightSideTab" :defaultGroupId="groupId" @groupClick="groupClick"></basic-info-navigation>
  </div>
</template>

<script>
import {
  infoEntryUploadImagePost,
  baseInfoGroupDataPost,
  infoEntryEnteredDataPost,
  infoEntryEnteredExportModelGet,
  infoEntryEnteredImportPost,
  infoEntryEnteredSavePost,
  infoEntryQaCategoriesPost,
  infoEntryCategoryTypePost,
  infoEntryGoupFieldPost,
  infoEntryUploadFilePost,
  infoEntryCommitPost
} from "@/service/api";
import {
  processingGroupData,
  getParamKey
} from "../service/personalInfoDataProcessing";
export default {
  props: {
    userId: String,
    userName: String
  },
  data() {
    return {
      allFieldList: [],
      groupId: "", // 当前级ID
      type:'1', // '1' 一级表,  ’2’ 二级表
      groupName: "", // 当前组名称
      currentEditSectionIndex: -1, // 当前正在编辑的section数据索引
      totalPages:'',
      pageSize:5,
      total:0,
      currentPage:1,

      isLoading:false,
    };
  },
  created() {},
  mounted() {},
  watch: {
    userId() {
      this.groupId = "10100";
      this.groupName = "个人基本信息";
      this.loadBaseAllField();
    }
  },
  methods: {
    //点击隐藏预览的信息
    containerClick(event) {
      if (event.target.className.indexOf("preview-container") != -1) {
        this.$refs.container.style.display = "none";
      }
    },
    // 导航栏 - 点击组
    groupClick(group) {
      this.groupId = group.id;
      this.groupName = group.name;

      this.loadBaseAllField();
    },
    // 加载组数据
    loadBaseAllField() {
      var formData = new FormData();
      formData.append("pageNum", this.currentPage);
      formData.append("pageSize", this.pageSize);
      formData.append("groupId", this.groupId);
      formData.append("type", this.type); // '1' 一级表,  ’2’ 二级表
      formData.append("status","3"); 
      formData.append("userId", this.userId);


      let that = this;
      that.isLoading = true;
      that.allFieldList = [];

      baseInfoGroupDataPost(formData).then(res => {
        console.time("loadTime");
        if (res.code == 200) {
          // 重置编辑状态
          this.currentEditSectionIndex = -1;

          if(res.data.show === true){

            this.totalPages = res.data.resultPage.totalPages;
            this.total = res.data.resultPage.total;
            
            var result = processingGroupData(res.data.resultPage.content);
            this.allFieldList = result.allFieldList; // 所有数据字段
          }else{
            this.totalPages = 0;
            this.allFieldList = [];
          }

        }
        // 加载职称分类option数据列表
        // this.findQaCategories();
        console.timeEnd("loadTime");
      //   this.$refs.content.scroll(0,0)
      }).finally(()=>{
         that.isLoading = false;
      })
         
    },

    // 获取select的option选项列表 - 通过职称获取岗位名称
    findCategoryTypePost(categoryTitle, isClear) {
      if (categoryTitle.trim() == "") {
        return;
      }

      var formData = new FormData();
      formData.append("categoryTitle", categoryTitle);
      infoEntryCategoryTypePost(formData).then(res => {
        if (res.code == 200) {
          var paramList = this.allFieldList[0].groupList[0].section[0];
          for (var i = 0; i < paramList.length; i++) {
            if ("10100-028" == paramList[i].id) {
              if (isClear == true) {
                paramList[i].userSelection.parameterValue = "";
              }
              paramList[i].options = res.data;
            }
          }
        }
      });
    },

    // 获取select的option选项列表 - 获取职称分类option选项列表
    findQaCategories() {
      infoEntryQaCategoriesPost().then(res => {
        if (res.code == 200) {
          this.qaCategoriesData = res.data;

          var paramList = this.allFieldList[0].groupList[0].section[0];
          for (var i = 0; i < paramList.length; i++) {
            // 职称评审 - 现职称所属领域
            if ("10100-027" == paramList[i].id) {
              paramList[i].options = res.data;

              // 职称评审 - 现职称所属类型
              for (
                var pindex = 0;
                pindex < paramList[i].options.length;
                pindex++
              ) {
                if (
                  paramList[i].options[pindex].name ==
                  paramList[i].userSelection.parameterValue
                ) {
                  paramList[i + 1].options =
                    paramList[i].options[pindex].childList;

                  // 职称评审 - 现职称
                  for (
                    var ppindex = 0;
                    ppindex < paramList[i + 1].options.length;
                    ppindex++
                  ) {
                    if (
                      paramList[i + 1].options[ppindex].name ==
                      paramList[i + 1].userSelection.parameterValue
                    ) {
                      paramList[i + 2].options =
                        paramList[i + 1].options[ppindex].childList;
                      break;
                    }
                  }
                  break;
                }
              }
              break;
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.preview-container {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.27058823529411763);

  display: none;
  flex-direction: column;
  align-items: center;
}

.preview-container > .content {
  background: white;
  /* width: calc(100% - 416px); */
  width: calc(100% - 516px + 173px); /* 173右侧导航栏的宽度 */
  margin-right: 173px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: 50px;

   position: absolute;
   left: 78px;
   top: 0px;
   bottom: 10px;

  box-shadow: 3px 1px 12px 1px #00000069;
  border-radius: 5px;
  padding-bottom: 56px;

  overflow-y: scroll;
}

.preview-container > .content > .module {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
}

.preview-container > .content > .module > .group {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  min-height: 60px;
}

.notData{
   margin: 0px 32px;
   color: rgb(128, 128, 128);
}


.preview-container > .content > .module > .group > .section {
  /*display: flex;*/
  display: block;
  flex-shrink: 0;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px 0px;
  margin: 0px 10px;
  border-top: solid #efefef 1px;
  padding-top: 28px;
  padding-bottom: 16px;
}
.preview-container > .content > .module > .group > .section:nth-of-type(2) {
  border-top: none;
}
.preview-container > .content > .module > .group > .section:last-child {
  padding-bottom: 0px;
}

.contentTitle {
  text-align: center;
  font-size: 31px;
  font-weight: bold;
  color: white;
  padding: 18px 0px 22px 0px;
  background: #314790;

  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

  background-image: url(../assets/home/beijing_shang@2x.png);
  background-size: 40% 100%; /* 背景图完整覆盖容器，但宽高比例变了，图片变形。*/
  background-repeat: no-repeat;
  background-position: right; /* left/center/right top/center/bottom;*/
}
.moduleTitle {
  color: #314790;
  font-size: 26px;
  background: #f5f8fd;
  padding: 10px 0px;
  width: 100%;
  text-align: center;
  margin-top: 27px;
}

.groupTitle {
  display: flex;
  flex-shrink: 0;
  color: #31478f;
  padding: 24px 0px;
  padding-right: 17px;
  padding-left: 22px;
  font-weight: bold;
}

.userPhoto {
  height: 300px;
  width: 33%;
  float: left;
}
.userPhoto > img {
  margin-left: 80px;
  object-fit: cover;
  border-radius: 8px;
  width: 197px;
  height: 300px;
}

.formItem {
  width: 33%;
  display: inline-flex;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  color: #333333;
  font-size: 14px;
  margin: 6px 0px;
}

.formItem > .name {
  text-align: right;
  padding-right: 4px;
  width: 36%;
}
.formItem > .name > i {
  color: rgb(18, 150, 219);
  margin-right: 4px;
}
.formItem > .value {
  width: 60%;
  display: flex;
}
.formItem > .value > i {
  font-size: 18px;
  cursor: pointer;
  color: #6f8bef;
  margin-left: 6px;
}

/* 50%宽度 */
.formItem_0_5 {
  width: 50%;
}
.formItem_0_5 > .name {
  width: 60%;
}
.formItem_0_5 > .value {
  width: 30%;
}

.dialogVisible_1 {
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.12156862745098039);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  font-size: 14px;
  overflow: auto;
  padding: 40px 0px;
  box-sizing: border-box;
}
.dialogVisible_1 > .container {
  width: 60%;
  background: white;
  border-radius: 5px;
  padding: 24px 30px 30px 30px;
  height: fit-content;
}
.dialogVisible_1 .title {
  line-height: 24px;
  font-size: 18px;
  color: #303133;
  padding-bottom: 24px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
}
.dialogVisible_1 .title > .close {
  cursor: pointer;
}
.dialogVisible_1 >>> td,
.dialogVisible_1 >>> .cell {
  font-size: 14px;
}
.tips-text {
  text-align: center;
}
a {
  color: #31478f !important;
}

/* 右侧导航栏 */
.rightSideTab {
  position: fixed;
  top: 50px;
  bottom: 0px;
  right: 78px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 173px;
}
.rightSideTab::-webkit-scrollbar {
  width: 9px; /* 横向滚动条宽度 */
  height: 9px; /* 竖向滚动条宽度 */
  background: rgba(0, 0, 0, 0);
  border: none;
}
/* 滚动条 - 滚动块样式 */
.rightSideTab::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 4px;
}
.rightSideTab > .content {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  background: white;
  /* box-shadow: 3px 1px 12px 1px #eaeaea; */
  border-radius: 5px;
  padding: 9px 0px;
  padding-top: 0px;
  margin-bottom: 15px;
}
.rightSideTab > .content > .moduleName {
  background: #31478f;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  padding: 11px 22px;
  color: white;
  cursor: pointer;

  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.rightSideTab > .content > .item {
  display: flex;
  cursor: pointer;
  flex-shrink: 0;
}
.rightSideTab > .content > .item > .text {
  padding: 9px 22px;
  /* text-align: center; */
  color: #999999;
  background: white;
  flex-grow: 1;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 使用省略号来代表被修剪的文本 */
  width: 100%;
  box-sizing: border-box;
}
.rightSideTab > .content > .item.active > .text {
  color: #31478f;
  background: #f5f8fd;
  font-weight: bold;
}
.rightSideTab > .content > .item.active > .line {
  width: 3px;
  min-width: 3px;
  background: #31478f;
}

.bottomLine {
  height: 1px;
  bottom: 0px;
  background-color: rgb(239, 239, 239);
  margin: 28px 40px;
}

.section .bottomLine:last-child {
  display: none;
}

.groupTitle .name {
  font-weight: bold;
}


 /* 分页 */
   .el-pagination{
      justify-content: flex-end;
      display: flex;
      padding-right: 34px;
   }
</style>
